<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 1000px;
            height: 600px;
            border: 1px black solid;
        }
        .lie{
            width: 100px;
            height: 598px;
            border: 1px black solid;
            float: left;
        }
        .rong{
            width: 890px;
            height: 598px;
            float: right;
        }
        .lie div{
            width: 100px;
            height: 150px;
            text-align: center;
            line-height: 150px;
        }
        img{
            width: 50px;
            height: 50px;
        }
        table{
            width: 890px;
            
        }
        thead{
            width: 890px;
        }
        tbody{
            width: 890px;
        }
        td{
            text-align: center;
        }
        .lie1{
            background-color:rgb(86, 86, 86) ;
            color: rgb(255, 255, 255);
        }
        .lie2{
            background-color: black;
            color: rgb(255, 255, 255);
        }
        .lie3{
            background-color: black;
            color: #ffffff;
        }
        .lie4{
            background-color: black;
            color: #ffffff;
        }
        .xinxi{
            width: 150px;
            height: 150px;
            border-radius: 20%;
            position: relative;
            top: 65px;
            
        }
        span{
            font-size: 30px;
            
        }
        .ming{
            position: relative;
            left: 200px;
        }
        /* .tui{
            position: relative;
            top: 330px;
            left: 750px;
        } */
        .cheng{
            position: relative;
            left: 200px;
        }
        .aa{
            width: 600px;
            height: 50px;
            position: relative;
            top: 100px;
        }
        .phone{
            position: relative;
            left: 320px;

        }
        .da{
            width: 890px;
            height: 598px;
            display: none;
        }
        .gai{
            display: none;
            
        }
        .jia{
            display: none;
            text-align: center;
            position: relative;
            top: 100px;
            line-height: 50px;
        }
        .shou{
            position: relative;
            left: 340px;
        }
        .xingbie{
            position: relative;
            top: 100px;
            display: none;
        }
        .tui{
            position: fixed;
            top: 500px;
            left: 750px;
        }
        #main{
            width: 890px;
            height: 598px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="box" >
        <div class="lie">
            <div onclick="one()" class="lie1">商品管理</div>
            <div onclick="four()" class="lie4">添加商品</div>
            <div onclick="two()" class="lie2">统计图</div>
            <div onclick="three()" class="lie3">个人中心</div>
        </div>
        <div class="rong">
            
            <div class="biao">
                <input type="text"><button onclick="sou()">搜索</button><button onclick="sheng()">升序</button><button onclick="jiang()">降序</button>
                <table border="1px">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>图片</th>
                            <th>商品名</th>
                            <th>价格</th>
                            <th>售出</th>
                            <th>库存</th>
                            <th>状态</th>
                            <th>操作</th>
                            
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                    
                   </table>
            </div>   
                
           <div class="da">
            <span>头像：</span>
            <img src="https://gd-hbimg.huaban.com/3d08684c78c6bef02339f8be1ba7e1d64f6dcfd828ba-nTzqqR_fw658" alt="" class="xinxi">
            <span class="ming">用户名：</span>
            <span class="cheng"></span><br>
            <div class="aa">
              <span>性别：</span><span class="bie" onclick="gaixing()">男</span>
              <span class="phone">手机号:</span><span class="shou"></span>
            </div>
            <div class="xingbie">
                <span onclick="nan()">男</span>
                <span onclick="nv()">女</span>
            </div>
            <button class="tui" onclick ='tuichudeng()'>退出登录</button>
          </div>
          <div class="jia">
            名称：<input type="text"><br>
            库存：<input type="text"><br>
            价格：<input type="text"><br>
            状态：<input type="text"><br>
            售出：<input type="text"><br>
            图片：<input type="text"><br>
            <button onclick="add()">确认</button>
          </div>
          <div id = "main">
             
          </div>
        </div>
    </div>
    <div class="gai">
        名称：<input type="text"><br>
        库存：<input type="text"><br>
        价格：<input type="text"><br>
        状态：<input type="text"><br>
        售出：<input type="text"><br>
        图片：<input type="text"><br>
        <button onclick="xiugai()">确认</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <script>
        var biao = document.querySelector('.biao')
        var tbody = document.querySelector('tbody')
        var da = document.querySelector('.da')
        function apply(){
            var xhr = new XMLHttpRequest()  
            xhr.open('get','https://liu.zzgoodqc.cn/goodsx/goodslist')
            xhr.send()
            xhr.onload = () =>{
               
                var a = JSON.parse(xhr.response)
                tbody.innerHTML = ''
                a.data.forEach(item => {
                    tbody.innerHTML += `
                    <tr>
                <td>${item.id}</td>        
                <td><img src="${item.img}" alt=""></td>
                <td>${item.goods_name}</td>
                <td>${item.price}</td>
                <td>${item.sold}</td>
                <td>${item.stock}</td>
                <td>${item.status}</td>
                <td><button onclick = 'xiu(${item.id})'>修改</button><button onclick = 'shan(${item.id})'>删除</button></td>      
             </tr>
                    `
                });
            }
            xhr.onerror = (e) =>{
                console.log(e)
            }
        }
        apply()
        
        // 商品页
        var lie1 = document.querySelector('.lie1')
        var lie2 = document.querySelector('.lie2')
        var lie3 = document.querySelector('.lie3')
        var lie4 = document.querySelector('.lie4')
        var jia = document.querySelector('.jia')
        var main = document.querySelector('#main')
        function one(){
             lie1.style = 'background-color:rgb(86, 86, 86) ;'
             lie2.style = ' background-color: black;'
             lie3.style = ' background-color: black;'
             lie4.style =' background-color: black;'
             da.style.display = 'none'
             biao.style.display = 'block'
             jia.style.display = 'none'
             main.style.display = 'none'
        }
        function two(){
             lie2.style = 'background-color:rgb(86, 86, 86) ;'
             lie1.style = ' background-color: black;'
             lie3.style = ' background-color: black;'
             lie4.style =' background-color: black;'
             biao.style.display = 'none'
             da.style.display = 'none'
             jia.style.display = 'none'
             main.style.display = 'block'
        }
        function three(){
             lie3.style = 'background-color:rgb(86, 86, 86) ;'
             lie2.style = ' background-color: black;'
             lie1.style = ' background-color: black;'
             lie4.style =' background-color: black;'
             biao.style.display = 'none'
             da.style.display = 'block'
             jia.style.display = 'none'
             main.style.display = 'none'

        }
        function four(){
            lie1.style = ' background-color: black;'
             lie2.style = ' background-color: black;'
             lie3.style = ' background-color: black;'
             lie4.style ='background-color:rgb(86, 86, 86) ;'
             da.style.display = 'none'
             biao.style.display = 'none'
             jia.style.display = 'block'
             main.style.display = 'none'

        }
        // 删除
        function shan(i){
            var xhr = new XMLHttpRequest()
        xhr.open('get','https://liu.zzgoodqc.cn/goodsx/delete?id=' + i)
        xhr.send()                        
        xhr.onload = () => {
            apply()
        }
        xhr.onerror = (e) => {
            console.log(e)
        }
        }
        // 个人信息
        var msg = JSON.parse(localStorage.getItem("message"))
        console.log(msg)
        var cheng = document.querySelector('.cheng')
        var shou = document.querySelector('.shou')
        var bie = document.querySelector('.bie')
        var xingbie = document.querySelector('.xingbie')
        cheng.innerText = msg.acount
        shou.innerText = msg.phone
        console.log(shou)
        function nan(){
            bie.innerText = '男'
            xingbie.style.display = 'none'
        }
        function nv(){
            bie.innerText = '女'
            xingbie.style.display = 'none'
        }
        function gaixing(){
            xingbie.style.display = 'block'
        }
        // 修改
        var gai = document.querySelector('.gai')
        var input = document.querySelectorAll('input')
        var iid 
        function xiu(id){
            gai.style.display = 'block'
            iid = id
        } 
        function xiugai(){
            var xhr = new XMLHttpRequest()
            xhr.open('post','https://liu.zzgoodqc.cn/goodsx/update?id=' + iid)
            xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8')
            var obj = {
                goods_name:input[6].value,
                stock:input[7].value,
                price:input[8].value,
                status:input[9].value,
                sold:input[10].value,
                img:input[11].value,
            }
            xhr.send(JSON.stringify(obj))
            xhr.onload = () =>{
                gai.style.display = 'none'
                
                    apply()
            }
            xhr.onerror = (e) => {       
                    console.log(e)
            }
        }
        // 添加
        
        function add() {
        var xhr = new XMLHttpRequest()
        xhr.open('post','https://liu.zzgoodqc.cn/goodsx/add')
        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8')
           var obj = {
            goods_name:input[0].value,
            stock:input[1].value,
            price:input[2].value,
            status:input[3].value,
            sold:input[4].value, 
            img:input[5].value,
            
           }
        xhr.send(JSON.stringify(obj))
        xhr.onload = () => {
           apply()
        }
        xhr.onerror = (e) => {
            console.log(e)
        }
       }
    //    搜索
    function sou() {
        var xhr = new XMLHttpRequest()
        xhr.open('post','https://liu.zzgoodqc.cn/goodsx/search?goods_name=' + input[0].value)
        xhr.send()
        xhr.onload = () => {
            var a = JSON.parse(xhr.response).data
            console.log(a)
            tbody.innerHTML = `
             <tr>
                <td>${a[0].id}</td>        
                <td><img src="${a[0].img}" alt=""></td>
                <td>${a[0].goods_name}</td>
                <td>${a[0].price}</td>
                <td>${a[0].sold}</td>
                <td>${a[0].stock}</td>
                <td>${a[0].status}</td>
                <td><button onclick = 'xiu(${a[0].id})'>修改</button><button onclick = 'shan(${a[0].id})'>删除</button><button onclick="fan()">退出</button></td>      
             </tr>
                    `
           
        }
        xhr.onerror = (e) => {
            console.log(e)
        }
       }
    //    升序
    function sheng(){
        var xhr = new XMLHttpRequest()
        xhr.open('get','https://liu.zzgoodqc.cn/goodsx/sort?sort=asc&type=price')
        // xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8')
        xhr.send()
        xhr.onload = () => {
            var a = JSON.parse(xhr.response).data
            console.log(a)
            // apply()
            tbody.innerHTML = ''
            a.forEach(item =>{
               tbody.innerHTML += `
            <tr>
                <td>${item.id}</td>        
                <td><img src="${item.img}" alt=""></td>
                <td>${item.goods_name}</td>
                <td>${item.price}</td>
                <td>${item.sold}</td>
                <td>${item.stock}</td>
                <td>${item.status}</td>
                <td><button onclick = 'xiu(${item.id})'>修改</button><button onclick = 'shan(${item.id})'>删除</button></td>      
             </tr>
                    `
            })
            
        }
        xhr.onerror = (e) => {
            console.log(e)
        }
    }
    // 降序
    function jiang(){
        var xhr = new XMLHttpRequest()
        xhr.open('get','https://liu.zzgoodqc.cn/goodsx/sort?sort=desc&type=price')
        // xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8')
        xhr.send()
        xhr.onload = () => {
            var a = JSON.parse(xhr.response).data
            console.log(a)
            // apply()
            tbody.innerHTML = ''
            a.forEach(item =>{
               tbody.innerHTML += `
                    <tr>
                <td>${item.id}</td>        
                <td><img src="${item.img}" alt=""></td>
                <td>${item.goods_name}</td>
                <td>${item.price}</td>
                <td>${item.sold}</td>
                <td>${item.stock}</td>
                <td>${item.status}</td>
                <td><button onclick = 'xiu(${item.id})'>修改</button><button onclick = 'shan(${item.id})'>删除</button></td>      
             </tr>
                    `
            })
            
        }
        xhr.onerror = (e) => {
            console.log(e)
        }
    }
    function tuichudeng(){
        location.assign('./项目登录.html')
    }
    // 图表
    var myChart = echarts.init(document.getElementById('main'));
    console.log(myChart)
    var option = {
            grid:{
              top:300,
              
            },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['酸奶', '薄荷奶绿', '新疆炒米粉', '黄金蛋炒饭', '螺蛳粉', '10.24', '11.8']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [820, 932, 901, 934,901 ,934 , 901],
              type: 'line',
              areaStyle: {}
            }
          ],
          
         lineStyle:{          
             color:'yellow',                          
         },
         areaStyle:{         
             color: "rgb(249, 244, 211)" ,
         }
        };
        
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>